<ion-header class="register-header">
  <ion-navbar hideBackButton="true">
    <ion-buttons start navPop class="back-buttons">
      <button ion-button clear></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="register-section">

  <div class="reg-title" [class.translateY]="hideTitle">欢迎注册猴哥贷</div>

	<form #regFormRef="ngForm" novalidate [class.translateY]="hideTitle">
		<ion-list no-lines>

      <!--
      pattern="\\d{11,11}"
      -->
			<ion-item>
        <div class="reg-name"></div>
				<input
          [(ngModel)]="register.username"
          name="username"
          type="text"
          #usernameRef="ngModel"
          placeholder="请输入手机号"
          maxlength="11"
          required
        >
        <span *ngIf="register.username.length>0"
              class="clear-button"
              (click)="clearUserName()"
        ></span>
			</ion-item>

      <ion-item>
        <!--
        pattern="\\w{4,6}"
        -->
        <div class="msg-code"></div>
        <input [(ngModel)]="register.msgCode"
               type="text"
               name="msg_code"
               class="msg-code-input"
               #verifyRef="ngModel"
               minlength="4"
               placeholder="请输入短信验证码"
               required
        >
        <span *ngIf="register.msgCode.length>0"
              class="clear-msg-button"
              (click)="clearMsgCode()"
        ></span>

        <button ion-button
                clear
                (click)="executeGetAgain()"
                [disabled]="countdown>0"
        >发送</button>

        <span class="show-time"
              *ngIf="countdown>0"
        >{{countdown}}s</span>


      </ion-item>

      <!--
      pattern="\\w{6,12}"
      -->
      <ion-item>
        <div class="reg-password"></div>
        <input [(ngModel)]="register.password"
               name="password"
               [type]="switchover.type"
               #passwordRef="ngModel"
               placeholder="请输入至少6位密码"
               minlength="6"
               required
        >
        <span *ngIf="register.password.length>0"
              class="show-pwd"
              [class.active]="!switchover.status"
              (click)="switchoverPassword(switchover)"
        ></span>
      </ion-item>

		</ion-list>

    <button ion-button
            class="do-reg"
            (click)="executeRegister()"
            [disabled] = '!regFormRef.valid'
            type="submit"
            block
    >注&nbsp;&nbsp;&nbsp;册</button>

    <p>点击注册即表示同意<a>《用户协议》</a></p>
    <button class="do-login"
            block
            small
            navPop
            ion-button
            clear
    >已有账号登录</button>
	</form>


</ion-content>
